<template>
    <div class="brandInfoContainer">
        <div class="infolist">
          <div class="headerSection">
            <split-vertical title="品牌信息"></split-vertical>
            <v-form :formProps="searchForm" ref="form"
                    v-on:handleReset="handleReset"
                    v-on:coverFormData="coverFormData">
            </v-form>
          </div>
          <div class="stand">
            <div style="line-height:50px;margin-left:10px;">
              <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
            </div>
            <div style="margin:0 10px;">
              <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
            </div>
          </div>
          <div class="block">
              <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="pageIndex"
                  :page-sizes="[10]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageCount">
              </el-pagination>
          </div>

            <el-dialog
          :visible.sync="dialogFormVisible"
          width="40%">
          <div slot="title">
            新增品牌信息
          </div>
          <el-form :model="form" label-width="110px" label-position="right" :rules="rules" ref="form">
            <el-form-item label="品牌中文名称" prop="brandCnName">
              <el-input v-model="form.brandCnName" style="width: 80%;" ></el-input>
            </el-form-item>
            <el-form-item label="品牌英文名称" >
              <el-input v-model="form.brandEnName" style="width: 80%;" ></el-input>
            </el-form-item>
            <el-form-item label="品牌描述" >
              <el-input v-model="form.brandDesc" style="width: 80%;" ></el-input>
            </el-form-item>
            <el-form-item label="品牌方" >
              <el-select v-model="form.companyId" placeholder="请选择" style="width: 83%;" >
                <el-option
                  v-for="item in cooperCompany"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="submitBrand('form')" size="medium">确 定</el-button>
          </div>
        </el-dialog>
          <el-dialog
            :visible.sync="dialogForm"
            width="40%">
            <div slot="title">
              编辑品牌信息
            </div>
            <el-form :model="form" label-width="110px" label-position="right"  ref="form">
              <el-form-item label="品牌中文名称">
                <el-input v-model="row.brandCnName" style="width: 80%;" ></el-input>
              </el-form-item>
              <el-form-item label="品牌英文名称" >
                <el-input v-model="row.brandEnName" style="width: 80%;" ></el-input>
              </el-form-item>
              <el-form-item label="品牌描述" >
                <el-input v-model="row.brandDesc" style="width: 80%;" ></el-input>
              </el-form-item>
              <el-form-item label="品牌方" >
                <el-select v-model="row.companyId" placeholder="请选择" style="width: 83%;" >
                  <el-option
                    v-for="item in cooperCompany"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForm = false" size="medium">取 消</el-button>
              <el-button type="primary" @click="editBrand" size="medium">确 定</el-button>
            </div>
          </el-dialog>
        </div>
    </div>
</template>

<script>

import VTable from "components/common/PageTable/VTable"
import SplitVertical from "components/common/SplitVertical"
import VForm from "components/common/VForm"
import VButton from "components/common/VButton"

var accLevel={
    '1':'一级授权',
    '2':'二级授权'
}
let authStatus={
  0:'未授权',
  1:'已授权',
  2:'即将过期',
  3:'授权过期'
}
export default {
    inject:['reload'],
    components:{
      VTable,VForm, VButton, SplitVertical,
    },
    data(){
        return{
            dialogFormVisible:false,
            dialogTitle:"新增品牌信息",
            isShowCount:false,
            dialogForm:false,
            form: {
              brandCnName: '',
              brandEnName: '',
              brandDesc: '',
              companyId: '',
            },
            rules:{
              brandCnName: [
                { required: true, message: '请输入品牌中文名', trigger: 'blur' },
              ],
              companyId: [
                { required: true, message: '请选择品牌方', trigger: 'blur' },
              ],
            },
            pageCount:0,
            pageIndex:1,
            pageSize:10,
            brandSelect:[],
            searchForm: {
            col: 3,
            labelWidth: '85px',
            submitBtn: {
              text: '搜索'
            },
            formItemArray: [{
              label: '授权品牌',
              prop: 'brandId',
              placeholder: "请选择",
              itemType: 'select',
              options: [],
              value: ''
            }, {
              label: '品牌编码',
              prop: 'brandCode',
              placeholder: "请输入",
              value: ''
            },{
              label: '授权级别',
              prop: 'accreditLevel',
              placeholder: "请选择",
              itemType: 'select',
              options:  [{
                value: '1',
                label: '一级授权'
              },
                {
                  value: '2',
                  label: '二级授权'
                }],
              value: ''
            }]
          },
          operationBtnArray: [{
            text: '刷新',
            show: true,
            icon:'el-icon-refresh',
            type: 'primary',
            methodName: 'refresh',
            }, {
              icon:'el-icon-plus',
              text: '新增',
              show: true,
              type: 'success',
              methodName: 'add',
            }],
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                columnArray:[
                    {label: '品牌中文名', prop: 'brandCnName',  sortable: false},
                    {label: '品牌英文名', prop: 'brandEnName',  sortable: false},
                    {label: '品牌方', prop: 'companyName',  sortable: false},
                    {label: '授权状态', prop: 'authorizationStatus',sortable: false},

                ],
                rowHandle:{
                    view:{
                        show:true
                    }

                }
            },
          searchCondition:{},
          cooperCompany:[],
          row:{}
        }
    },
    created(){
      this.init()
    },
    methods:{
        init(){
           this.brandList()
           this.selectBrand()

        },
        submitBrand(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
             this.addBrand()
            } else {
              return false;
            }
          });
        },
        addBrand(){
          let param=this.form
          param['userId'] = localStorage.getItem("userID")
          let success = data=>{
            if(data.statusCode == "1"){
                this.$message.success("添加成功");
                this.dialogFormVisible=false;
                this.reload();
            }else{
                this.$message.error(data.statusMessage)
            }
          }
          this.api.newBrandAdd(param,success)
        },
        editBrand(){
          let param=this.row
          param['userId'] = localStorage.getItem("userID")
          let success = data=>{
            if(data.statusCode == "1"){
              this.$message.success("更新成功")
              this.dialogForm=false
              this.reload()
            }else{
              this.$message.error(data.statusMessage)
            }
          }
          this.api.newBrandUpDateOne(param,success)
        },
        handleSearchTopBtn(methodName) {
          if (methodName === "refresh") {
            this.refresh();
          } else if(methodName == "add"){
            this.create();
          }
        },
        handleReset(formName) {
          this.$refs.form.resetForm(formName);
        },
        coverFormData(data) {
          this.searchCondition = data;
          this.query()
        },
        handleOperation(rowIndex, row, methodName) {
            this.id=row.id;
            this.row=row;
            if(methodName == "update"){
              this.dialogForm=true;
              this.row=row;
              this.brandCoopCompany()
            }else if(methodName == "delete"){
                this.delBrandInfo()
            }else{
              this.lookBrandInfo()
            }
        },
        lookBrandInfo(){
            this.$router.push({
              path:'/brand-add',
              query:{
                id:this.id
              }
            })
        },
        delBrandInfo(){
          this.tips.ConfirmModal('确认要删除品牌中文名为【'+this.row.brandCnName+'】吗？', () => {
            // let parmas={
            //   id:this.id
            // }
            // let success=data=>{
            //   if(data.code=='statusCode'){
            //     this.reload()
            //     this.$message.success("删除成功")
            //   }else{
            //     this.$message.error(data.statusMessage)
            //   }
            // }
            // this.api.brandDelete(parmas,success)
          });
        },
        //选择品牌
        selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                  this.searchForm.formItemArray.forEach(item => {
                    if (item.prop === 'brandId') {
                      item.options = this.buildExceptKeyAndValue(data.data, "bname", "id", "label", "value");
                    }
                  })
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandDetail({},success)
        },
        //初始化品牌信息接口，以及列表渲染
        brandList(){
            let parmas={
                 page:{
                   pageIndex:this.pageIndex,
                   pageSize:this.pageSize,
                 }
            }
            let success=data=>{
                if(data.statusCode == '1'){
                    this.pageCount = data.body.count

                    this.tableParams.dataArray= data.body.records
                  this.tableParams.dataArray.forEach(ele=>{
                    ele.authorizationStatus =authStatus[ele.authorizationStatus]
                  })

                }else{
                    this.$message.error(data.statusMessage)
                }
            }
            this.api.newBrandList(parmas,success)
        },
        //刷新列表
        refresh(){
            this.brandList()
        },

        //查询
        query(){
              let param = this.searchCondition;
              if (!param.pageIndex || !param.pageSize) {
                param['pageIndex'] = this.pageIndex;
                param['pageSize'] = this.pageSize;
              }
              let success = data => {
                if (data.code === 'OK') {
                  this.pageCount = data.pageCount;
                  this.tableParams.dataArray=data.data
                  data.data.forEach(element => {
                    element.accreditLevel =accLevel[element.accreditLevel]
                    element.accreditStartTime=element.accreditStartTime.substr(0,10)
                    element.accreditEndTime=element.accreditEndTime.substr(0,10)
                  });
                } else {
                  this.$message.error(data.msg);
                }
              };
            this.api.brandListAll(param,success)
         },
        //弹框
        create(){
            this.dialogFormVisible=true
            this.brandCoopCompany()
        },
        brandCoopCompany(){
          let succ=data=>{
              if(data.statusCode == "1"){
                  this.cooperCompany=data.body
              }else{
                 this.$message.error(data.statusMessage)
              }
          }
            this.api.companyListAdd({},succ)
        },
        //当前页
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.query()
        }
    },

}
</script>


<style lang="scss" scoped>
.brandInfoContainer{
    width: 100%;
    .headerSection{
      background:#fff;
      height:140px;
      padding:0 10px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
    .block{
        padding: 10px 0;
        text-align: right;
    }
}
</style>
